Daze Blogger Template | Documentation (Free Version)

Getting Started

Template Info

Thank You For Downloading My Template. Please Read The Documentation Carefully, If You Still Have Any Problem Please Feel Free To Email Via My Contact Page.

Note : Premium And Lifetime Support Only Provided To Full Version Buyers

It Is Restricted To Remove Our Credit Link Due To The Erasure Of The Credit Links Will Make Your Site To Redirect templateclue.com For Those Who Want To Remove Can Purchase The Template.

What You Get?

  • Removed Footer Credits
  • No Encrypted Codes
  • Unlimited Support
  • Full Access
  • Lifetime Template Updates
  • For Unlimited Domains
  • And Much More...

Purchase Now!!!

Features

  • Responsive
  • SEO Friendly
  • Featured Slider
  • Label Post Widget
  • Clean Look
  • Homepage Share Button
  • Responsive Dropdown Navigation
  • Responsive Menu
  • Breadcrumbs
  • Related Posts with Thumb
  • Search Box
  • Information Message Box
  • Nice Looking Code Box & Blockquotes
  • Clean Looking Buttons
  • Social Share Button
  • Numbered Page Navigation
  • Custom Recent Comment Widget
  • Multi Author Box
  • Clean Comment Style
  • And more..

Installation

You Can Install The Template In Two Ways:

  1. Uploading: Go to your dashboard > Template > Backup / Restore > Upload the .xml.
  2. Direct Uploading: By Copy And Paste.Just Copy Your Blogger Template By Opening It In Notepad Select The Whole Code And Paste It Into Template Editor.

1. Uploading Method

Customize Template

Logo Setting:

Go to your Blogger Account - Your Blog & select Layout

Now In Header Widget Click On Edit

Upload Your Logo And Select "Instead of title and description" as the "Placement" option & Select Shrink To Fit.

Navigation:1 (TOP)
  1. Go to Blogger.com -> Your Blog -> Template -> Edit HTML And Find ( CTRL + F ) This:- <!-- Top Nav -->
  2. Then replace the # with your urls.
Social Links:
  1. Go to Blogger Dashboard -> Layout -> Social Header [Social Buttons] -> Click On Edit Button
Icons Available [ facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen , vimeo]

Note: The Social Site Name Sholud Be In Lower-Case.

Navigation:2 (Main)
  1. Go to Blogger.com -> Your Blog -> Layout -> Main Menu -> Click On Edit Button

Magazine Tiles (Setup Guide)

It Works Automatically With New Post.
But Few Things Are Needed To Work It Perfectly:

  1. Your Blog Must Be Public From The Settings
  2. Your Blog Feed Set To Be Full From settings -> Other -> Site feed -> Allow Blog Feed (Full).
  3. Your Blog Post Has At Least One Label In Your Latest Posts.
  4. Please Try To Add High Quality Images.
  5. If There Is No Image, The Default Image Will Appear Please Change It If You Want To.
    To Change The Default Image Search In Blogger Template Editor " // set your own image " And Replace The Default Image URL With Your Own URL.
    Default Image "https://2.bp.blogspot.com/-P-GUNABxRKw/WC1q72iQ7PI/AAAAAAAAA7g/ByI_TtOtf_E4yMqd6z2NyoHAcBEk3y9EQCLcB/s1600/default%2Bimage.JPG"

Label Post Widget (Setup Guide)

To Setup Label Post Widget Follow These Steps:

Note: Your Blog Must Be Public From The Settings

  1. Go To Blogger -> Layout
  2. Now You See "Home_post_widget-1 , 2 , 3...." As Shown In The Below Image
  3. Click On Edit
  4. Now You Will See A POP UP. Just Put Your Label Name In The "Title" & In "Content"
  5. Now Same Process For Other Labels Widgets
Footer Social Links:
  1. GGo to Blogger.com -> Your Blog -> Template -> Edit HTML And Find ( CTRL + F ) This:- <!-- social-footer -->
  2. And Replace # With Your Links.

Widgets

Recent Comment Widget:
  • Go to Blogger.com -> Your Blog -> Layout -> Click " Add a Gadget " In Sidebar Or In Other Section You Want To Add The Widget -> HTML/JavaScript
  • Now Add This Code In The Content : 
     4/recentcomments
  • Change The Number If You Want To Increase OR Decrease The Number Of Comments
Recent Post Widget(sidebar):
  • Go to Blogger.com -> Your Blog -> Layout -> Click " Add a Gadget " In Sidebar Or In Other Section You Want To Add The Widget -> HTML/JavaScript
  • Now Add This Code In The Content : 
     4/recentposts
  • Change The Number If You Want To Increase OR Decrease The Number Of Posts
About Me Widget(code)
  • Go to Blogger.com -> Your Blog -> Layout -> Click " Add a Gadget " In Sidebar Or In Other Section You Want To Add The Widget -> HTML/JavaScript
  • Now Add This Code In The Content : 
    		
<div class="about-widget-wrap"><span class="about-img"><img src="http://3.bp.blogspot.com/-pjsubLK2UZw/VWyCPksqudI/AAAAAAAAA7A/79ScqXoK0SE/s1600/fbtc.jpg" /></span>
    <div class="about-widget-txt">
        <h4 class="abt-author-name">Jacob Doe</h4>
        <p>Hello there minim veniam, quis nostrud exerci ullamcorper suscipit lobortis.</p>
        <ul class="about-social">
            <li>
                <a href="http://twitter.com" class="twitter" target="_blank"><i class="fa fa-twitter"/></i></a>
            </li>
            <li>
                <a href="http://facebook.com" class="facebook" target="_blank"><i class="fa fa-facebook"/></i></a>
            </li>
            <li>
                <a href="http://google.com" class="google" target="_blank"><i class="fa fa-google"/></i></a>
            </li>
            <li>
                <a href="http://instagram.com" class="instagram" target="_blank"><i class="fa fa-instagram"/></i></a>
            </li>
        </ul>
    </div>
</div>
  • Replace The Image "src"
  • Change The Name & The Bio
  • Replace "#" With Your Links

Shortscode

Buttons:
  1. In the Post section, click on edit post or create a new post
  2. Click on HTML
  3. A code is written below use that code to display that Button link
<!-- Default Button (Red) -->
<a class="btn-tc red" href="#your_link" target="_blank">Text</a>


<!-- Green Button -->
<a class="btn-tc green" href="#your_link" target="_blank">Text</a>


<!-- Yellow Button -->
<a class="btn-tc yellow" href="#your_link" target="_blank">Text</a>


<!-- Blue Button -->
<a class="btn-tc blue" href="#your_link" target="_blank">Text</a>
Alert Box OR Info Box:
  1. In the Post section, click on edit post or create a new post
  2. Click on HTML
  3. A code is written below use that code to display the alert boxes

<!-- Info Box -->
<div class="information post_message_tc">
<h2>
Information</h2>
This is an 'information message' div. It helps people get to know the site a little better.</div>

<!-- announcement Box -->
<div class="announcement post_message_tc">
<h2>
Announcement</h2>
This is an 'announcement message' div! It is loud and proud to say things that you want people to hear first!</div>

<!-- success Box -->
<div class="success post_message_tc">
<h2>
Success</h2>
This is a 'success message' div. It is shown if a goal is reached or something is accomplished.</div>

<!-- warning Box -->
<div class="warning post_message_tc">
<h2>
Warning</h2>
This is a 'warning message' div. It warns the users that to expect some changes or limitations.</div>

<!-- error Box -->
<div class="error post_message_tc">
<h2>
Error</h2>
This is an 'error message' div. It stresses that there is an immediate problem. this should be used sparingly.</div>
Code Box (pre)
  1. In the Post section, click on edit post or create a new post
  2. Click on HTML
  3. A code is written below use that code to display the Code Box

<!-- Box For HTML -->
<pre data-codetype="HTML">&lt;a class="btn yellow" href="Your Link" target="_blank"&gt;Your Text Here&lt;/a&gt;&lt;/div&gt;</pre>

<!-- Box For CSS -->
<pre data-codetype="CSS">#Ghost{opacity:.9;}</pre>

<!-- Box For JS -->
<pre data-codetype="JS">window.alert(5 + 6);</pre>

Settings

Mobile Version

To Use Responsive Design In Mobile Devices Than First You Need To Enable It.

Note:The Responsive Menu Link Sub Menu Will Not Work(Open) In The Desktop If You Resize Your Window It Is Only Work On Mobile Devices.

  1. Go to Blogger.com -> Your Blog -> Template -> Now In Mobile Section Click On Gear Button As Shown In Given Below Image

2. Click On "No. Show desktop template on mobile devices." And Than Click On Save.

Change The Post Date Format:

Go to Blogger Dashboard -> Settings -> Language and Formatting -> Formatting -> Timestamp Format -> Set It To Date Instead Of Time.
Now Click On Save...

Want To Set Up The Template? Buy Theme + Installation Service